<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			/*body{
				background: #999;
			}*/
			.c{
				margin: 20px auto;
				width: 540px;
				height: 540px;
				background: #FFFFFF;
				/*border: 1px solid red;*/
				/*padding-left: 2px;
				padding-right: 2px;
				padding-top: 12px;
				padding-bottom: 8px;*/
				/*box-sizing: border-box;*/
				position: relative;
			}
			.n1{
				width: 100px;
				height: 100px;
				background: #66cd00;
				position: absolute;
				left: 110px;
				border-radius: 10px;
				z-index: 2;
			}
			.n2{
				width: 100px;
				height: 100px;
				background: #66cd00;
				position: absolute;
				left: 220px;
				border-radius: 10px;
				z-index: 2;
			}
			.n3{
				width: 100px;
				height: 100px;
				background: #66cd00;
				position: absolute;
				left: 330px;
				border-radius: 10px;
				z-index: 2;
			}
			.n4{
				width: 100px;
				height: 100px;
				background: #66cd00;
				position: absolute;
				left: 220px;
				top: 110px;
				border-radius: 10px;
			}
			.n5{
				width: 100px;
				height: 100px;
				background: #66cd00;
				position: absolute;
				left: 220px;
				top: 220px;
				border-radius: 10px;
			}
			.n6{
				width: 100px;
				height: 100px;
				background: #8168ea;
				position: absolute;
				
				top: 220px;
				border-radius: 10px;
			}
			.n7{
				width: 100px;
				height: 100px;
				background: #e86a80;
				position: absolute;
				
				top: 330px;
				border-radius: 10px;
			}
			.n8{
				width: 100px;
				height: 100px;
				background: #1ec0ff;
				position: absolute;
				
				top: 440px;
				border-radius: 10px 10px 10px 50px;
			}
			.n9{
				width: 100px;
				height: 100px;
				background: #face47;
				position: absolute;
				left: 110px;
				top: 330px;
				border-radius: 10px;
			}
			.n10{
				width: 100px;
				height: 100px;
				background: #86d335;
				position: absolute;
				left: 110px;
				top: 440px;
				border-radius: 10px;
			}
			.n11{
				width: 100px;
				height: 100px;
				background: #1ec0ff;
				position: absolute;
				left: 330px;
				top: 330px;
				border-radius: 10px;
			}
			.n12{
				width: 100px;
				height: 100px;
				background: #8168ea;
				position: absolute;
				left: 330px;
				top: 440px;
				border-radius: 10px;
			}
			.n13{
				width: 100px;
				height: 100px;
				background: #face47;
				position: absolute;
				left: 440px;
				top: 220px;
				border-radius: 10px;
			}
			.n14{
				width: 100px;
				height: 100px;
				background: #86d335;
				position: absolute;
				left: 440px;
				top: 330px;
				border-radius: 10px;
			}
			.n15{
				width: 100px;
				height: 100px;
				background: #e86a80;
				position: absolute;
				left: 440px;
				top: 440px;
				border-radius: 10px 10px 50px 10px;
			}
			.gg1{
				width: 100px;
				height: 20px;
				background: linear-gradient(to top,rgba(102,205,0,1),rgba(186,233,134,1),#deedcc);
				position: absolute;
				border-radius: 20px;   
				left: 110px;
				top: -6px;
				z-index: 1;
			}
			.gg2{
				width: 100px;
				height: 20px;
				
				position: absolute;
				left: 220px;
				top: -6px;
				border-radius: 20px;
				background: linear-gradient(to top,rgba(102,205,0,1),rgba(186,233,134,1),#deedcc);
				z-index: 1;
			}
			.gg3{
				width: 100px;
				height: 20px;
				top: -6px;
				border-radius: 20px;
				background: linear-gradient(to top,rgba(102,205,0,1),rgba(186,233,134,1),#deedcc);
				position: absolute;
				left: 330px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="c">
			<div class="n1"></div>
			<div class="n2"></div>
			<div class="n3"></div>
			<div class="n4"></div>
			<div class="n5"></div>
			<div class="n6"></div>
			<div class="n7"></div>
			<div class="n8"></div>
			<div class="n9"></div>
			<div class="n10"></div>
			<div class="n11"></div>
			<div class="n12"></div>
			<div class="n13"></div>
			<div class="n14"></div>
			<div class="n15"></div>
			<div class="gg1"></div>
			<div class="gg2"></div>
			<div class="gg3"></div>
		</div>
	</body>
</html>
